<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1>html datalist元素</h1>
    <form action="">
        <input type="text" name="" id="" list="女">
        <datalist id="女">
            <option value="男">男</option>
            <option value="女">女</option>
        </datalist>
    </form>

    <h1>复选框</h1>
    <form action="">
        <p>你喜欢什么水果？</p>
        <input type="checkbox">榴莲
        <input type="checkbox" name="" id="">香蕉
        <input type="checkbox" name="" id="" checked>波罗蜜
    </form>

    <!-- 这个对淘宝买东西的时候特别有用，添加购物车，最少添加1件； -->
    <h1>input输入类型是 number</h1>
    <form action="">
        <p>请输入从10到100的数字</p>
        <input type="number" name="" id="" max="100" min="10">
    </form>

    <h1>input输入类型是 date</h1>
    <form action="">
        <p>今天是多少号？</p>
        <input type="date" name="" id="">
        <p>你啥时候出生的？</p>
        <input type="date" name="" id="" min="1998-07-26">
    </form>

    <h1>html 的Input 有哪些属性？</h1>
    <!-- 
        value 规定字段的初始值，框框里面的东西；
        maxlength允许输入的字段的最大长度；
        autocomplete自动完成默认是开启的；
        autofocus 自动获取焦点；
     -->
    <form action="">
        <input type="text" name="" id="" value="text" size="400" maxlength="19" autocomplete="on"><br>
        <!-- 表示这个字段只读，不能修改； -->
        <input type="text" readonly><br>
        <!-- <input type="text" name="" id="" readonly="readonly"><br> -->
        <input type="text" name="" id="" disabled><br>
        <input type="text" name="" id="" autofocus>
    </form>

    <h1>svg图片</h1>
    <!-- <svg>

    </svg>
     -->

    <h1>object元素</h1>
    <object data="http://www.baidu.com" type="" width="100%" height="200px"></object>
    <h1>什么是cookie?</h1>


    <h1>html canvas画布</h1>
    <p>canvas 是通过javascript来绘画的</p>
    <!-- 1.创建Canvas元素 -->
    <canvas id="myCanvas" width="500px" height="500px">your brower does not support the canvas element.</canvas>
    <!-- 2.通过javaScript来绘制图形 -->
    <script type="text/javascript">
        // (1)首先找到canvas元素
        var c = document.getElementById("myCanvas");
        // (2)创建context对象
        var cxt = c.getContext("2d");
        // (3) 这几个javascript代码都看不懂，不懂里面的方法；
        // cxt.fillStyle = "#FFFF00";
        // cxt.fillRext(0, 0, 150, 75);

        // var cxt = c.getContext("2d");
        // cxt.fillStyle = "#FFFF00";
        // cxt.beginPath();
        // cxt.arc(70, 18, 15, 0, Math.PI * 2, true);
        // cxt.closePath();
        // cxt.fill();

    </script>
</body>

</html>